import React, { useEffect, useState } from 'react';
import { Button, Checkbox, Form, Input, message, Modal, Popconfirm, Space, Table, Tag } from 'antd';
import type { PopconfirmProps, TableProps } from 'antd';
import axios from '../../api/request';


function List() {
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
    }
    const [data, setData] = useState([])
    const [page, setPage] = useState(1)
    const [pageSize, setPageSize] = useState(10)
    const [keyword, setKeyword] = useState('')
    const [count, setCount] = useState(0)

    const listData = async () => {
        const res = await axios.get('/article/list', { params: { page: page, pageSize: pageSize, keyword: keyword } })
        setData(res.data.rows)
        setCount(res.data.count)
    }
    useEffect(() => {
        listData()
    }, [page, pageSize, keyword])

    const columns: TableProps<DataType>['columns'] = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '文章内容',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '创建(发布)时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
        },
        {
            title: '选项',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Popconfirm
                        title="删除"
                        description="确定删除吗?"
                        onConfirm={confirm}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <Button danger>删除</Button>
                    </Popconfirm>
                    <Button type="primary">添加</Button>
                </Space>
            ),
        },
    ];
    const onChange = (page, pageSize) => {
        setPage(page),
            setPageSize(pageSize)
    }
    //删除
    const confirm: PopconfirmProps['onConfirm'] = (e) => {
        console.log(e);
        message.success('Click on Yes');
    };

    const cancel: PopconfirmProps['onCancel'] = (e) => {
        console.log(e);
        message.error('Click on No');
    };
    //添加
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <div>
            <Button type="primary" onClick={showModal}>
                添加
            </Button>
            <Modal
                title="Basic Modal"
                closable={{ 'aria-label': 'Custom Close Button' }}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="id"
                        name="id"
                        rules={[{ required: true, message: '不可以为空!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="昵称"
                        name="昵称"
                        rules={[{ required: true, message: '昵称不可以为空!' }]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        label="手机号"
                        name="手机号"
                        rules={[{ required: true, message: '手机号不可以为空!' }]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                           提交
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            <Button color="danger" variant="outlined">批量删除</Button>
            <Table<DataType> columns={columns} dataSource={data}
                pagination={{
                    total: count,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: (total) => `Total ${total} items`,
                    onChange: onChange
                }}

            />
        </div>
    );
}

export default List;
